import React, { Component } from 'react';
import '../styles/MyList.scss'
import pic from '../assets/1.png'

class MyList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list: [
        { id: 1, news: 3, xiaoliang: 600, name: '黛珂植物化妆水', yuanjia: 270, money: 215, pic },
        { id: 2, news: 4, xiaoliang: 800, name: '黛珂牛油果乳液', yuanjia: 273, money: 205, pic },
        { id: 3, news: 2, xiaoliang: 700, name: '这个是很好用的水', yuanjia: 236, money: 199, pic },
        { id: 4, news: 1, xiaoliang: 200, name: '这个是很好用的口红', yuanjia: 456, money: 342, pic },
      ],
      list2: [
        { name: '综合' },
        { name: '销量' },
        { name: '新品' },
        { name: '价格' },
        { name: '筛选' },
      ],
      index1: 0
    }
  }
  handclick(index) {
    this.setState({ index1: index })
    switch (index) {
      case 0: this.state.list.sort(this.compareup("id"));
        break
      case 1: this.state.list.sort(this.compareup("xiaoliang"));
        break
      case 2: this.state.list.sort(this.compareup("news"));
        break
      case 3: this.state.list.sort(this.compareup("money"));
        break
    }
  }
  // 降序排序  
  compareup(propertyName) {
    return function (object1, object2) {
      var value1 = object1[propertyName];
      var value2 = object2[propertyName];
      return value1 - value2;
    }
  }
  render() {
    return (
      <div className='list'>
        <div className="top">
          {
            this.state.list2.map((item, index) => {
              return (
                <div className={'wenzi ' + (this.state.index1 === index ? 'active' : '')} key={index} onClick={() => { this.handclick(index) }}>
                  {item.name}
                </div>
              )
            })
          }

        </div>
        <div className="tasklist">
          {
            this.state.list.map((item, index) => {
              return (
                <div className="item" key={index}>
                  <img src={item.pic} alt="" />
                  <p className='p1'>{item.name}</p>
                  <p className='p2'>原价 ￥{item.yuanjia}</p>
                  <p className='p3'>抢购价￥<span>{item.money}</span></p>
                </div>
              )
            })
          }
        </div>
      </div>
    );
  }
}

export default MyList;